<template>
  <van-tabbar v-model="val">
    <van-tabbar-item icon="home-o" name="index">首页</van-tabbar-item>

    <van-tabbar-item icon="records-o" name="base">base</van-tabbar-item>

    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>

    <van-tabbar-item icon="setting-o" name="my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
  import router from '@/router'
  const props = defineProps({
    active: {
      type: String,
      default: '',
    },
  })

  // 当前激活的tabbar
  const val = computed({
    get() {
      return props.active
    },

    set(newValue) {
      console.log('🚀 ~ set ~ newValue:', newValue)

      // 处理标签跳转
      router.push({ name: newValue })
    },
  })
</script>

<style lang="less"></style>
